<template>
	<view class="safe-area-inset-bottom register">
		<view class="panel">
			<view class="form_class">
				<u-form :model="form" ref="uForm" label-width="200" :label-style="labelStyle"
					:contentStyle="contentStyle" :errorStyle="errorStyle">
					<u-form-item label="头像" prop="avatar_url">
						<view class="u-flex u-row-right u-col-center" @click="chooseAvatar">
							<u-avatar :src="form.avatar_url"></u-avatar>
						</view>
					</u-form-item>
					<u-form-item label="姓名/昵称" prop="nick_name">
						<u-input v-model="form.nick_name" :maxlength="5" input-align="right" placeholder="请输入姓名/昵称(限制最长5个字符)" />
					</u-form-item>
					<u-form-item label="性别" prop="sex">
						<picker @change="sexConfirm" :value="defaultSex" :range="sexList" range-key="label">
							<view class="uni-input">
								<text v-if="form.sex">{{sexList[defaultSex].label}}</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="生日" prop="birthday">
						<picker @change="birthConfirm" mode="date" :end="endDate" :value="form.birthday">
							<view class="uni-input">
								<text v-if="form.birthday">{{form.birthday}}</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="身高(cm)" prop="height">
						<picker @change="heightConfirm" :value="defaultHeight" :range="heightList" range-key="label">
							<view class="uni-input">
								<text v-if="form.height">{{form.height}}cm</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="体重(kg)" prop="weight">
						<picker @change="weightConfirm" :value="defaultWeight" :range="weightList" range-key="label">
							<view class="uni-input">
								<text v-if="form.weight">{{form.weight}}kg</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="三维(cm)" prop="sanwei">
						<picker @change="dimensionConfirm" mode="multiSelector" :value="defaultDimension" :range="dimensionsList" range-key="label">
							<view class="uni-input">
								<text v-if="form.sanwei">{{form.sanwei}}</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="鞋码(eu)" prop="shoe">
						<picker @change="shoseConfirm" :value="defaultShose" :range="shoseList" range-key="label">
							<view class="uni-input">
								<text v-if="form.shoe">{{form.shoe}}</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="衣服(size)" prop="clothes">
						<picker @change="clothConfirm" :value="defaultCloth" :range="clothList" range-key="label">
							<view class="uni-input">
								<text v-if="form.clothes">{{form.clothes}}</text>
								<text v-else class="placeholder">请选择</text>
								<u-icon class="u-m-l-10" name="arrow-down-fill" color="#c0c4cc"></u-icon>
							</view>
						</picker>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="btn">
			<u-button type="error" :custom-style="btnCustom" @click="submit()">注册</u-button>
		</view>
	</view>
</template>

<script>
	import { uploadFiles } from '../../config/util.js'
	export default {
		data() {
			return {
				labelStyle: {
					paddingLeft: '40rpx',
				},
				contentStyle: {
					paddingRight: '40rpx'
				},
				btnCustom: {
					backgroundColor: '#F56B79',
					color: '#FFFFFF',
					fontSize: '40rpx',
					height: '88rpx'
				},
				errorStyle: {
					textAlign: 'right',
					paddingRight: '40rpx'
				},
				chestIdx: '',
				waistIdx: '',
				hipIdx: '',
				form: {
					avatar_url: '',
					nick_name: '',
					sex: '',
					birthday: '',
					height: '',
					weight: '',
					sanwei: '',
					shoe: '',
					clothes: ''
				},
				defaultSex: 0,
				sexList: [{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					}
				],
				
				endDate: '',

				heightList: [],
				defaultHeight: 0,

				defaultWeight: 0,
				weightList: [],
				
				dimensionsList: [],
				defaultDimension: [0, 0, 0],
				
				shoseList: [],
				defaultShose: 0,
				
				clothList: [{
					label: 'S',
					value: 'S',
				},{
					label: 'M',
					value: 'M',
				},{
					label: 'L',
					value: 'L',
				},{
					label: 'XL',
					value: 'XL',
				}],
				defaultCloth: 0,
				
				rules: {
					avatar_url: [{
						validator: (rule, value, callback) => {
							console.log(this.form.avatar_url)
							return !!this.form.avatar_url;
						},
						message: '请上传头像',
						trigger: ['change','blur'],
					}],
					nick_name: [{
						required: true, 
						message: '请输入姓名/昵称', 
						trigger: ['change','blur'],
					}],
					sex: [{
						required: true,
						message: '请选择性别', 
						trigger: ['change','blur'],
					}],
					birthday: [{
						required: true,
						message: '请选择生日', 
						trigger: ['change','blur'],
					}],
					height: [{
						required: true,
						message: '请选择身高', 
						trigger: ['change','blur'],
					}],
					weight: [{
						required: true,
						message: '请选择体重', 
						trigger: ['change','blur'],
					}],
					sanwei: [{
						required: true,
						message: '请选择三维', 
						trigger: ['change','blur'],
					}],
					shoe: [{
						required: true,
						message: '请选择鞋码', 
						trigger: ['change','blur'],
					}],
					clothes: [{
						required: true,
						message: '请选择衣码', 
						trigger: ['change','blur'],
					}]
				},
			}
		},
		onLoad() {
			this.endDate = this.$u.timeFormat(new Date().valueOf())
			for (let i = 110; i < 221; i++) {
				this.heightList.push({
					label: i + '', 
					value: i,
				})
			}
			for (let i = 20; i < 100; i++) {
				this.weightList.push({
					label: i + '',
					value: i
				})
			}
			let tempList = []
			for (let i = 40; i <= 120; i++) {
				tempList.push({
					label: i + '',
					value: i
				});
			}
			this.dimensionsList[0] = tempList
			this.dimensionsList[1] = tempList
			this.dimensionsList[2] = tempList
			// this.form.sanwei = '胸围' + this.dimensionsList[0][0].label + ' 腰围' + this.dimensionsList[1][0].label + ' 臀围' + this.dimensionsList[2][0].label
			for (let i = 30; i <= 48; i++) {
				this.shoseList.push({
					label: i + '',
					value: i
				});
			}
			
			// 获取缓存里面的数据
			let userinfo = uni.getStorageSync('carduserinfo') || {}
			if(userinfo) {
				this.form.avatar_url = ''
				this.form.nick_name = userinfo.nickname
				this.form.height = userinfo.height
				this.form.weight = userinfo.weight
				this.form.birthday = userinfo.birthday
				this.form.sex = userinfo.sex
				this.form.shoe = userinfo.shoe
				this.form.clothes = userinfo.cloth
				this.chestIdx = userinfo.bwh_b
				this.waistIdx = userinfo.bwh_w
				this.hipIdx = userinfo.bwh_h
				this.form.sanwei = `胸围${this.chestIdx} 腰围${this.waistIdx} 臀围${this.hipIdx}`
			}
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			/**
			 * 头像
			 */
			chooseAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.form.avatar_url = res.tempFilePaths[0]
					}
				});
			},
			/**
			 * 性别选择确认
			 */
			sexConfirm(e) {
				this.defaultSex = e.detail.value
				this.form.sex = this.sexList[e.detail.value].label
			},
			/**
			 * 生日选择
			 */
			birthConfirm(e) {
				console.log(e)
				this.form.birthday = e.detail.value
			},
			/**
			 * 身高确认
			 */
			heightConfirm(e) {
				this.defaultHeight = e.detail.value
				this.form.height = this.heightList[e.detail.value].label
				console.log(this.form.height)
			},

			/**
			 * 体重确认
			 */
			weightConfirm(e) {
				this.defaultWeight = e.detail.value
				this.form.weight = this.weightList[e.detail.value].label
			},
			
			/**
			 * 三维确认
			 */
			dimensionConfirm(e) {
				this.chestIdx = this.dimensionsList[0][e.detail.value[0]].label;
				this.waistIdx = this.dimensionsList[1][e.detail.value[1]].label;
				this.hipIdx = this.dimensionsList[2][e.detail.value[2]].label;
				this.form.sanwei = '胸围' + this.chestIdx + ' 腰围' + this.waistIdx + ' 臀围' + this.hipIdx
				this.defaultDimension = e.detail.value
			},
			
			/**
			 * 鞋码确认
			 */
			shoseConfirm(e) {
				this.form.shoe = this.shoseList[e.detail.value].label
				this.defaultShose = e.detail.value
			},
			
			/**
			 * 衣服确认
			 */
			clothConfirm(e) {
				console.log(e)
				this.form.clothes = this.clothList[e.detail.value].label
				this.defaultCloth = e.detail.value
			},
			
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						let imgList = [{
							src: this.form.avatar_url,
							name: this.form.avatar_url,
							uploaded: false
						}]
						let imgs = await uploadFiles(imgList)
						// console.log(imgs[0])
						let cardInfo = {
							nickname: this.form.nick_name,
							sex: this.form.sex,
							birthday: this.form.birthday,
							height: this.form.height,
							weight: this.form.weight,
							bwh_b: this.chestIdx,
							bwh_w: this.waistIdx,
							bwh_h: this.hipIdx,
							shoe: this.form.shoe,
							cloth: this.form.clothes,
							avatar: this.form.avatar_url || uni.getStorageSync('userInfo').avatarUrl
						}
						cardInfo.is_birthday = true
						cardInfo.is_bwh = true
						cardInfo.sub_user_id = ''
						cardInfo.xcxcode = {
							moka_code: uni.getStorageSync('userInfo').avatarUrl
						}
						uni.setStorageSync('carduserinfo', cardInfo)
						uni.navigateTo({
							url: '/pages/drawCard/custom'
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.register {
			background-color: #F9F9F9;
			min-height: 100vh;
			
		.panel {
			padding-top: 28rpx;
			background-color: #F9F9F9;

			.form_class {
				background-color: #FFFFFF;
			}
		}
		.uni-input {
			text-align: right;
			
			.placeholder {
				color: #c0c4cc;
			}
		}
		.btn {
			margin: 54rpx 78rpx;
		}
	}
</style>
